<!-- 订单编辑弹窗 -->
<template>
  <div class="ele-body">
    <a-card :title="orderModalApp.title" :bordered="false">
      <a-form
        ref="form2"
        :model="orderModalApp.order"
        :rules="orderModalApp.rules"
        :label-col="{md: {span: 7}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
        <a-row :gutter="16">

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="订单号:" name="code">
              <a-input
                v-model:value="orderModalApp.order.code"
                placeholder="请输入订单号"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="商品:" name="commodityId">
              <m-entity-select
                :default-value="orderModalApp.order.commodityName"
                v-model:value="orderModalApp.order.commodityId"
                placeholder="请选择商品"
                module="Order"
                entity="Commodity"
                class="ele-fluid"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="规格:" name="specification">
              <a-input
                v-model:value="orderModalApp.order.specification"
                placeholder="请输入规格"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="购买用户:" name="userId">
              <m-entity-select
                :default-value="orderModalApp.order.userName"
                v-model:value="orderModalApp.order.userId"
                placeholder="请选择购买用户"
                module="Order"
                entity="User"
                class="ele-fluid"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="用户地址:" name="userAdressId">
              <m-entity-select
                :default-value="orderModalApp.order.userAdressName"
                v-model:value="orderModalApp.order.userAdressId"
                placeholder="请选择用户地址"
                module="Order"
                entity="ShippingAddress"
                class="ele-fluid"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="店铺:" name="shopId">
              <m-entity-select
                :default-value="orderModalApp.order.shopName"
                v-model:value="orderModalApp.order.shopId"
                placeholder="请选择店铺"
                module="Order"
                entity="Shop"
                class="ele-fluid"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="订单状态:" name="orderStatus">
              <m-dict-select
                v-model:value="orderModalApp.order.orderStatus"
                placeholder="请选择订单状态"
                dict="订单状态"/>
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="付款时间:" name="payTime">
              <a-date-picker
                v-model:value="orderModalApp.order.payTime"
                placeholder="请选择付款时间"
                value-format="YYYY-MM-DD H:m:s"
                class="ele-fluid"/>
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="发货时间:" name="deliveryTime">
              <a-date-picker
                v-model:value="orderModalApp.order.deliveryTime"
                placeholder="请选择发货时间"
                value-format="YYYY-MM-DD H:m:s"
                class="ele-fluid"/>
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="签收时间:" name="signTime">
              <a-date-picker
                v-model:value="orderModalApp.order.signTime"
                placeholder="请选择签收时间"
                value-format="YYYY-MM-DD H:m:s"
                class="ele-fluid"/>
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="完成时间:" name="completeTime">
              <a-date-picker
                v-model:value="orderModalApp.order.completeTime"
                placeholder="请选择完成时间"
                value-format="YYYY-MM-DD H:m:s"
                class="ele-fluid"/>
            </a-form-item>
          </a-col>

          <a-col :md="12" :sm="24" :xs="24">
            <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
              <!--class="ele-pull-right"-->
              <div v-if="orderModalApp.display">
                <teleport to="#orderEditModalFooter">
                  <div>
                    <a-space size="middle">
                      <a-button @click="orderListApp.editModalShowing=false">取消
                      </a-button>
                      <a-button
                        type="primary"
                        @click="onSubmit(orderModalApp.order)"
                        :loading="loading">提交
                      </a-button>
                      <!--<a-button v-if="!eid"
                                type="dashed"
                                @click="continueSubmit"
                                :loading="loading">继续提交
                      </a-button>-->
                    </a-space>
                  </div>
                </teleport>
              </div>
              <div v-if="!orderModalApp.display">
                <a-space size="middle">
                  <a-button @click="onBack()">返回列表</a-button>
                  <a-button
                    type="primary"
                    @click="onSubmit(orderModalApp.order)"
                    :loading="loading">提交
                  </a-button>
                  <!--<a-button v-if="!eid"
                            type="dashed"
                            @click="continueSubmit"
                            :loading="loading">继续提交
                  </a-button>-->
                </a-space>
              </div>

            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

  </div>

</template>

<script>
import {defineComponent, inject, reactive, onMounted} from 'vue'
import {useRoute, useRouter} from "vue-router"
import {OrderService} from "@/views/mall/Order/order/orderService";
import {VXETable} from 'vxe-table'
import {useStore} from "vuex";
import regions from 'ele-admin-pro/packages/regions.js';


import MDictSelect from "@/components/MDict/dictSelect";
import MEntitySelect from "@/components/MEntity/entitySelect";

export default defineComponent({
  components: {
    MDictSelect,
    MEntitySelect,
  },
  setup() {
    // 省市区数据
    const cityData = regions
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let routeId = route.params.id;
    let orderListApp = inject('orderListApp', reactive({}));
    let orderGrid = inject('orderGrid', reactive({}))
    const orderModalApp = reactive({
      id: null,
      order: {},
      isEdit: false,
      display: false
    });
    orderModalApp.rules = {
      code: [
        {
          required: true,
          type: 'string',
          message: '请输入订单号',
          trigger: 'blur'
        }
      ],
      commodityId: [
        {
          required: true,
          type: 'number',
          message: '请输入商品',
          trigger: 'blur'
        }
      ],
      commodityName: [
        {
          required: false,
          type: 'string',
          message: '请输入商品',
          trigger: 'blur'
        }
      ],
      specification: [
        {
          required: false,
          type: 'string',
          message: '请输入规格',
          trigger: 'blur'
        }
      ],
      userName: [
        {
          required: false,
          type: 'string',
          message: '请输入购买用户',
          trigger: 'blur'
        }
      ],
      userId: [
        {
          required: true,
          type: 'number',
          message: '请输入购买用户',
          trigger: 'blur'
        }
      ],
      userAdressId: [
        {
          required: true,
          type: 'number',
          message: '请输入用户地址',
          trigger: 'blur'
        }
      ],
      userAdressName: [
        {
          required: false,
          type: 'string',
          message: '请输入用户地址',
          trigger: 'blur'
        }
      ],
      shopName: [
        {
          required: false,
          type: 'string',
          message: '请输入店铺',
          trigger: 'blur'
        }
      ],
      shopId: [
        {
          required: false,
          type: 'number',
          message: '请输入店铺',
          trigger: 'blur'
        }
      ],
      orderStatus: [
        {
          required: true,
          type: 'string',
          message: '请输入订单状态',
          trigger: 'blur'
        }
      ],
      payTime: [
        {
          required: false,
          type: 'string',
          message: '请输入付款时间',
          trigger: 'blur'
        }
      ],
      deliveryTime: [
        {
          required: false,
          type: 'string',
          message: '请输入发货时间',
          trigger: 'blur'
        }
      ],
      signTime: [
        {
          required: false,
          type: 'string',
          message: '请输入签收时间',
          trigger: 'blur'
        }
      ],
      completeTime: [
        {
          required: false,
          type: 'string',
          message: '请输入完成时间',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      orderModalApp.order = reactive({});
      if (routeId) {//路由
        orderModalApp.id = routeId;
        orderModalApp.display = false;
        findOrder(orderModalApp.id);
      } else if (orderListApp.editModalForEdit) {//修改弹窗
        orderModalApp.id = orderListApp.currentId;
        orderModalApp.display = true;
      } else if (!orderListApp.editModalForEdit && orderListApp.addModalForEdit) {//新增弹窗
        orderModalApp.display = true;
      } else {
        orderModalApp.title = "新增学生";
      }
      if (orderModalApp.id) findOrder(orderModalApp.id);
    })

    const findOrder = (id) => {
      OrderService.findOrderForView(id).then((res) => {
        orderModalApp.order = res.data;
        //TODO:为编辑准备.
        orderModalApp.title = "编辑学生 " + orderModalApp.order.name;
      }).catch(error => {
        VXETable.modal.message({content: `查找学生出错，原因是：${error.message}`, status: 'error'});
      })
    }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
      // debugger;
      //当为数组时用逗号连接
      if (data.eid) {
        //修改
        OrderService.updateOrder(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      } else {
        //新增
        OrderService.saveOrder(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      }
    }

    /*TODO:继续提交*/
    const continueSubmit = () => {
      VXETable.modal.message({content: 'error 提示', status: 'error'});
    }

    /*TODO:返回列表*/
    const onBack = () => {
      router.push(`/mall/Order/order`);
      store.dispatch('user/tabRemove', route.fullPath);
      setTimeout(() => {
        orderGrid.value.commitProxy("query");
      }, 1500);
      orderListApp.editModalShowing = false;
    }
    return {
      cityData,
      routeId,
      orderListApp,
      orderModalApp,
      onSubmit,
      continueSubmit,
      onBack,
    }

  },
})
</script>

<style scoped>

</style>
